"use client"
import { Sidebar } from "@/components/sidebar";
import { Setting } from "@/components/setting"
import { useEffect, useState } from 'react';
import axios from "axios";

export default function MyPage() {

    const [usageBasic, setUsageBasic] = useState(0);
    const [usagePremium, setUsagePremium] = useState(0);
    const [vipLevel, setVipLevel] = useState(0);
    const [isLoginVisible, setIsLoginVisible] = useState(true);

    const getUsage = () => {

        let config = {
            method: 'get',
            maxBodyLength: Infinity,
            url: `${process.env.NEXT_PUBLIC_API_URL}/api/user/usage`
        };

        axios.request(config)
            .then((response) => {
                setUsageBasic(response.data.usageBasic);
                setUsagePremium(response.data.usagePremium);
                setVipLevel(response.data.vipLevel)
                setIsLoginVisible(false)
            })
            .catch((error) => {
                console.log(error);
                setIsLoginVisible(true);
            });
    }

    useEffect(() => {
        getUsage();
    });


    return (
        <>
            <div className="flex">

                <div className="w-64">
                    <Sidebar usagePremium={usagePremium} usageBasic={usageBasic} vipLevel={vipLevel} isLoginVisible={isLoginVisible} ></Sidebar>
                </div>
                <div className="w-full h-screen p-8 overflow-auto">
                    <Setting></Setting>
                </div>
                {/* <Login></Login> */}
            </div>
        </>
    );
}